@import "../../../base/base";
@import "~pofod/base/base";
@prefix:medical;
.@{prefix}-container {
  background: url("./img/banner.jpg") no-repeat center;
  background-size: cover;
  .@{prefix} {
    color:#fff;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    .max-media(1200px, { padding-bottom: 20px; });
    position: relative;
    .@{prefix}-content-box{
      position: absolute;
      left: 0;
      top: 45%;
      .translate(0,-50%);
      .max-media(1200px, { padding:0 10px; });
    }
    #@{prefix}-content {
      text-indent: 0;
      width: 53%;
      float: left;
      padding-top: 80px;
      .max-media(1024px, { float: none; width: 100%; padding-top: 20px; });
      h1{
        color: #fff;
        font-size: 36px;
        position: relative;
        margin-bottom: 30px;
        .max-media(600px,{
          font-size: 28px;
        });
        &:after{
          position: absolute;
          content: "";
          background: #fff;
          width: 100px;
          height: 5px;
          left: 0px;
          bottom: -15px;
          .translate(0,-50%);
        }
      }
    }
    .@{prefix}-img-container {
      float: right;
      position: relative;
      width: 50%;
      text-align: center;
      height: 346px;
      .max-media(1024px, { float: none; width: 100%; margin-top: 20px; });
      .max-media(460px, { height: auto; });
      img {
        height: 100%;
        margin: 0 !important;
        .max-media(460px, { width: 80%; height: auto; });
      }
      .@{prefix}-strategy1, .@{prefix}-strategy2, .@{prefix}-strategy3 {
        position: absolute;
        top: 50%;
        .translate(0, -50%)
      }
    }
  }
  .@{prefix}-rank{
    max-width: @box-width;
    margin: 0 auto;
    text-align: center;
    padding: 1px 0 30px;
    .max-media(1200px,{padding: 1px @mobilePadding 20px});
    h1{
      .title(#666);
      .max-media(1200px,{margin-top: 30px});
    }
    p{
      margin-top: -20px;
    }
    img{
      margin-top: 10px;
      max-width: 100%;
    }
  }
  .@{prefix}-structure{
    background: url("./img/strcture.jpg") no-repeat center;
    background-size: cover;
    .@{prefix}-structure-box{
      max-width: @box-width;
      margin: 0 auto;
      padding: 1px 0 30px;
      .max-media(1200px,{padding: 1px @mobilePadding 20px});
      text-align: center;
      h1{
        .title(#fff);
        .max-media(1200px,{margin-top: 30px});
      }
      p{
        margin-top: -20px;
        color: #fff;
      }
      img{
        margin-top: 15px;
        max-width: 100%;
      }
    }
  }
}